import styles from './QuestionCard.module.scss';

type QuestionCardProps = {
  id: string;
  title: string;
  description: string;
  isPublished: boolean;
  answerCount: number;
  createdAt: string;
}

export default function QuestionCard(props: QuestionCardProps) {
  return (
    <div className={styles.container}>
      <TitleContainer {...props}/>
      <ButtonContainer />
    </div>
  )
}

function TitleContainer(props: QuestionCardProps) {
  return <div className={styles.title}>
    <TitleLeftItem {...props} />
    <TitleRightItem {...props} />
  </div>
} 

function TitleLeftItem(props: {title: string}) {
  return <div className={styles.left}><a href='#'>{props.title}</a></div>
}

//最小权限原则 - 组件只使用了这三个属性/让 TypeScript 提供更精确的类型检查
function TitleRightItem(props: {isPublished: boolean, answerCount: number, createdAt: string}) {
  return <div className={styles.right}>
    {props.isPublished ? <span style={{color: 'green'}}>已发布</span> : <span style={{color: 'black'}}>未发布</span>}
    &nbsp;
    <span>答卷：{props.answerCount}</span>
    &nbsp;
    <span>{props.createdAt}</span>
  </div>
}

function ButtonContainer() {
  return <div className={styles['button-container']}>
    <div className={styles.left}>
      <button>编辑问卷</button>
      &nbsp;
      <button>数据统计</button>
    </div>
    <div className={styles.right}>
      <button>查看</button>
      <button>复制</button>
      <button>删除</button>
    </div>
  </div>
}
